<template>
  <div class="tg-order">
    <div class="order-list-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>团购订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item label="下单日期：">
          <el-date-picker v-model="startEndTime"
            type="daterange"
            style="width:250px"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="timeChange"
            size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model="commodityName"
            clearable
            placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="title"
            clearable
            placeholder="请输入团购券活动名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="userName"
            clearable
            placeholder="请输入购买人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="operatorName"
            clearable
            placeholder="请输入推荐人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            icon="el-icon-search"
            style=" line-height: 32px;padding: 0 21px;"
            @click="handleSearch"></el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-table :data="groupBuyingOrder"
          max-height="600">
          <el-table-column prop="payNum"
            label="订单编号"
            width="">
          </el-table-column>
          <el-table-column prop="commodityName"
            label="商品名称"
            width="">
          </el-table-column>
          <el-table-column prop="num"
            label="购买数量"
            width="">
          </el-table-column>
          <el-table-column prop="money"
            label="付款金额"
            width="">
          </el-table-column>
          <el-table-column prop="orderTime"
            label="下单时间"
            width="">
          </el-table-column>
          <el-table-column prop="userName"
            label="购买人"
            width="">
          </el-table-column>
          <el-table-column prop="phone"
            label="手机号"
            width="">
          </el-table-column>
          <el-table-column prop="operatorName"
            label="推荐人"
            width="">
          </el-table-column>
          <el-table-column prop="title"
            label="归属团购券活动"
            width="">
          </el-table-column>
          <el-table-column width=""
            label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                @click="detail(scope.row.id)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item style="padding:20px">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="订单详情"
      width="400px"
      :visible.sync="dialog_detail">
      <OrderDetail :id="id" />
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="dialog_detail = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTgOrderList } from "@/public/js/order.js";
import OrderDetail from "./OrderDetail";
export default {
  components: {
    OrderDetail
  },
  props: {},
  data() {
    return {
      groupBuyingOrder: [],
      pageSize: 10,
      pageNum: 1,
      commodityName: "",
      title: "",
      userName: "",
      operatorName: "",
      startTime: "",
      endTime: "",
      total: 0,
      startEndTime: [],
      dialog_detail: false,
      id: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    //获取团购订单列表
    _getTgOrderList() {
      getTgOrderList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        commodityName: this.commodityName,
        title: this.title,
        userName: this.userName,
        operatorName: this.operatorName,
        startTime: this.startTime,
        endTime: this.endTime
      }).then(res => {
        console.log(res);
        this.groupBuyingOrder = res.data.groupBuyingOrder;
        this.total = res.data.total;
      });
    },
    //下单时间查询
    timeChange(timeVal) {
      if (timeVal) {
        this.startTime = timeVal[0];
        this.endTime = timeVal[1];
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this._reset();
    },
    _reset() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._getTgOrderList();
    },
    handleSearch() {
      this._reset();
    },
    detail(id) {
      this.id = id;
      this.dialog_detail = true;
    },
    //分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getTgOrderList();
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this._getTgOrderList();
    }
  },
  created() {
    this._getTgOrderList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.tg-order {
}
</style>